<template>
  <el-dialog
  title="题目预览"
  @close="close"
  width="60%"
  :visible="dialogVisible">
    <!-- 第一行 -->
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple">【题型】: {{formatQuestionType(results.questionType)}} </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light">【编号】: {{results.id}} </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">【难度】: {{formatDifficulty(results.difficulty)}} </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"> 【标签】: {{results.tags}} </div></el-col>
    </el-row>
    <!-- 第二行 -->
    <el-row style="margin-top: 20px">
      <el-col :span="6"><div class="grid-content bg-purple"> 【学科】: {{results.subjectName}} </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"> 【目录】: {{results.directoryName}} </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"> 【方向】: {{results.direction}} </div></el-col>
    </el-row>
      <hr>
    <p>【题干】:</p>
    <!-- 问题 -->
    <p v-html="results.question" style="color: blue"></p>

    <div >
    <!-- 单选区域 -->
    <el-row  v-if="results.questionType === '1'">
       <p>{{formatQuestionType(results.questionType)}}题  选项：（以下选中的选项为正确答案）</p>
       <el-radio style="display:block; margin:7px 0" v-model="radio" v-for="item in list" :key="item.id" :label="item.title"></el-radio>
    </el-row>

    <!-- 多选区域 -->
    <el-row  v-else-if="results.questionType === '2'">
      <p>{{formatQuestionType(results.questionType)}}题 选项：（以下选中的选项为正确答案）</p>
      <el-checkbox-group
        v-model="checked">
        <el-checkbox style="display:block; margin:7px 0" v-for="item in list" :key="item.id" :label="item.title"></el-checkbox>
      </el-checkbox-group>
    </el-row>

    <!-- 简答区域 -->
    <el-row  v-else-if="results.questionType === '3'">
    </el-row>
    </div>

    <hr>
    <!-- 参考答案 -->
    <el-row>
      <el-row type="flex">
        <el-col :span="3">
          <p>【参考答案】: </p>
        </el-col>
        <el-col>
          <el-button style="margin-top: 6px;margin-left: 6px" size="small" type="danger" @click="show" >视频答案预览</el-button>
        </el-col >
      </el-row>
      <el-row  >
        <video controls autoplay :src= results.videoURL type="video/webm" v-if="key" ></video>
      </el-row>
    </el-row>
      <hr>
    <!-- 答案解析 -->
    <el-row type="flex" >
      <el-col :span="3">
        <p>【答案解析】: </p>
      </el-col>
      <el-col >
        <p v-html="results.answer" style="padding-left: 6px"></p>
      </el-col>
    </el-row>
      <hr>
    <!-- 题目备注 -->
    <el-row type="flex">
      <el-col :span="3">
        <p>【题目备注】: </p>
      </el-col>
      <el-col >
        <p v-html="results.remarks" style="padding-left: 6px"></p>
      </el-col>
    </el-row>
    <!-- 关闭按钮 -->
    <span slot="footer" class="dialog-footer">
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="close" style="float: right">关 闭</el-button>
      </el-row>
    </span>
  </el-dialog>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
import { difficulty, questionType } from '@/api/hmmm/constants.js' // 引入枚举数组

export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default () {
        return {}
      }
    }

  },
  data () {
    return {
      // data: {
      //   id: 22
      // },
      key: false,
      results: {},
      list: [],
      checked: [],
      radio: '',
      type: false
    }
  },
  created () {
    this.detail()
  },
  methods: {
    // 关闭弹窗
    close () {
      this.$emit('update:dialogVisible', false)
      this.results = []
      this.$emit('colse')
    },
    async detail () { // 获取数据
      const { data } = await detail(this.data)
      this.results = data
      this.list = data.options
      // 给checked 和 radio 值
      const arr = data.options.filter(item => item.isRight === 1)
      arr.forEach(item => {
        this.checked.push(item.title)
        this.radio = item.title
      })
    },
    formatQuestionType (str) {
      const obj = questionType.find(item => item.value === Number(str))
      return obj ? obj.label : ''
    },
    formatDifficulty (str) {
      const obj = difficulty.find(item => item.value === Number(str))
      return obj ? obj.label : ''
    },
    show () {
      this.key = !this.key
    }

  }

}
</script>

<style>

</style>
